<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="商机跟进记录"
    width="1000px"
    @close="close"
  >
    <el-table
      v-loading="listLoading"
      :data="BusinessRecord"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="跟进ID"
        prop="TrackID"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="跟进人"
        prop="StaffName"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column
        align="center"
        label="跟进时间"
        prop="TrackTime"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column align="center" label="跟进方式" width="120">
        <template #default="{ row }">
          <span v-if="row.TrackType === 1">电话</span>
          <span v-if="row.TrackType === 2">上门</span>
          <span v-if="row.TrackType === 3">客户到公司</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="成熟度"
        prop="TrackLevel"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        align="left"
        label="跟进内容"
        prop="TrackMemo"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="下次跟进时间"
        prop="NextTrackTime"
        show-overflow-tooltip
      />
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </el-dialog>
</template>

<script>
  import { getList } from '@/api/customerTrackingTracklist'
  export default defineComponent({
    name: 'BusinessRecord',
    setup() {
      // const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        dialogFormVisible: false,
        BusinessRecord: [],
        total: 0,
        queryForm: {
          CustomerPickID: 0,
          OrderID: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
      })

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }

      const showEdit = (OrderID) => {
        state.queryForm.OrderID = OrderID
        fetchData()
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        state.BusinessRecord = list
        state.total = total
        state.listLoading = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        fetchData,
        handleCurrentChange,
        handleSizeChange,
      }
    },
  })
</script>
